<template>
  <view class="header-wrap" v-show="!props.hide" :style="`--header-height: 44px;--capsule-width:100px`">
    <view
      class="header-box"
      :class="{ 'header-line': line == 'line', 'header-line-shadow': line == 'shadow' }"
      :style="`--header-background:var(${backgroundColor});--header-color:var(${textColor})`"
      catch-move
      catchtouchmove
    >
      <view class="header-back" v-if="showBack || props.showHome" @tap="onBack">
        <template v-if="!showBack"><image class="home-img" src="/assets/imgs/home.png" /></template>
        <template v-else-if="!props.backText">
          <c-icon icon="chevron-left" size="28px" />
        </template>
        <template v-else>{{ props.backText }}</template>
      </view>
      <view class="header-title" :class="{bw:!!slots.right,hk:!showBack && !props.showHome}">
        <slot></slot>
        <view v-if="slots.right">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { View, Image } from '@tarojs/components';
import { CIcon, CImg } from '.';

import { computed, ref } from 'vue';
import { useReady, getCurrentPages } from '@tarojs/taro';
import { useRouter } from '@/hooks';

const router = useRouter();
const slots = defineSlots();
const props = defineProps({
  textColor: String,
  hide: Boolean,
  backgroundColor: String,
  showHome: Boolean,
  backText: String,
  onBack: Function
});
const showBack = ref(true);
const onBack = e => {
  if (props.onBack) {
    return props.onBack(e);
  }
  if (showBack.value) {
    return router.back();
  }
  router.reload('/pages/home/index');
};
useReady(() => {
  showBack.value = getCurrentPages().length > 1;
});
</script>
<style lang="scss">
.header-wrap {
  box-sizing: content-box;
  --header-height: 88px;
  --header-background: var(--color-caption);
  --header-color: var(--color-default);
  height: var(--header-height);
  padding-top: var(--safe-top);

  .header-box {
    padding-top: var(--safe-top);
    box-sizing: content-box;
    position: fixed;
    height: var(--header-height);
    background-color: var(--header-background);
    color: var(--header-color);
    width: 100vw;
    left: 0px;
    top: 0px;
    z-index: 99;
  }
  .header-back {
    position: absolute;
    left: 0px;
    height: var(--header-height);
    width: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    bottom: 0px;
    .home-img {
      width: calc(var(--header-height) * 0.46);
      height: calc(var(--header-height) * 0.46);
    }
  }
  .header-title {
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-height);
    margin: 0 var(--header-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(var(--header-height) * 0.36);
    font-weight: bold;
    &.bw{
      justify-content: space-between;
      margin-right: var(--capsule-width);
      &.hk{
        margin-left: 20px;
      }
    }
  }
  .header-line {
    border-bottom: var(--onepx) solid var(--color-line);
  }
  .header-line-shadow {
    box-shadow: 0px 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }
}
</style>
